<template>
    <div class="timing">
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-button type="primary" @click="synchronous">同步模块用户信息</el-button>
          <el-button type="primary" @click="synchQyronous">同步企业微信用户信息</el-button>
        </el-col>
      </el-row>
       <el-table
       class="tableAutoBtn"
        :data="tableUserData"
        v-loading="loading"
        border
        :header-cell-style="getRowClass"
        :row-class-name="tableRowClassName"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%"
    >
        <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50"
        />
        <el-table-column
            prop="userRealName"
            label="用户名"
            align="center"
        />
        <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
        />
        <el-table-column
        prop=""
        label="操作"
        width="220"
        align="center"
        >
        <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="addrole(scope.row)">角色分配</el-button>
        </template>
        </el-table-column>
    </el-table>
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

        <el-dialog
            title="设置角色"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-select v-model="roleName" clearable multiple placeholder="请选择">
                <el-option
                v-for="item in userList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="isSure">确 定</el-button>
            </span>
        </el-dialog>
    </div>
  </template>
  
  <script>
  import { usergetUserList,usergetRoleList,usersyncUsersInfo,userfindUserRoleList,useraddUserRolesMapping} from '@/api/home_/adminCenter'
  import request from '@/utils/request'
  export default {
    components: { },
    data() {
      return {
        loading:false,
        roleName:[],
        dialogVisible:false,
        title: '查看历史',
        userList :[],
        selectuser:null,
        total: 0,
        size: 10,
        page: 1
      }
    },
    created() {
  
    },
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
        this.getRoleList()
      })
    },
    methods: {  
        isSure(){
          useraddUserRolesMapping(this.roleName,this.selectuser.userId).then(res=>{
            if(res.code==200){
              this.$message.success(res.msg)
              this.dialogVisible=false;
              this.roleName = []
              this.getUserList()
            }else{
              this.$message.error(res.msg)
            }
          })
        },
        synchQyronous(){
          request({
              url: '/ht-bpmn/user/syncUsersInfoByWeChat',
              method: 'post',
              data:{}
          }).then(res => {
              if (res.code == 200) {
                this.$message.success('同步成功')
              this.getUserList()
              } else {
                this.$message.error(res.msg)
              }
          })
        },
        synchronous(){
          usersyncUsersInfo({}).then(res=>{
            if(res.code==200){
              this.$message.success('同步成功')
              this.getUserList()
            }else{
              this.$message.error(res.msg)
            }
          })
        },
        addrole(v){
            this.selectuser = JSON.parse(JSON.stringify(v))
            this.roleName =[]
            userfindUserRoleList({userId:v.userId}).then(res=>{
              if(res.code==200){
                this.roleName = []
                this.dialogVisible = true
                res.data.forEach((item,index)=>{
                  this.roleName.push(item.roleId)
                })
              }
            })
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 1) {
                return 'warningRow'
            } else {
                return ''
            }
        },
        getRowClass({ rowIndex, columnIndex }) {
            if (rowIndex == 0) {
                return 'background:#f2f5f8;fontSize:14px;color:#515a6e;'
            }
        },
        handleSizeChange(v) {
          this.page = 1
            this.size = v
            this.getUserList()
        },
        handleCurrentChange(v) {
            this.page = v
            this.getUserList()
        }, 
        getRoleList(){
            usergetRoleList({
                'page': 0,
                'limit': 0
            }).then(res => {
                this.userList = res.data.roleList
            })
        },
        getUserList() {
            this.loading=true
            usergetUserList({
                'page': this.page,
                'limit': this.size
            }).then(res => {
                this.tableUserData = res.data.userList
                this.total = Number(res.data.total)
                this.loading=false
            })
        }
        }
    }
  </script>
  
  <style lang="scss" scoped>
    // @import "~@/assets/styles/auto.scss";
    >>>.warningRow {
        background: #f2f5f8;
    }
    .fromClass{
      padding: 20px 0;
    }
        .info{
          margin-top: 20px;
        }
        .info>p{
          padding:4px 0;
          margin-left:80px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .info>p:nth-child(1){
          color: #474747;
          font-weight: bold;
          background: #f1f4f7;
          padding-left: 0px;
        }
        .info>p>label{
          display: inline-block;
          width:35%;
        }
        .info>p>span{
          color:#494949;padding: 2px 4px;
          border-radius: 2px;font-size: 12px;
          background: #f0f0f0;
        }
      .ztree {
          margin-left:80px;
          border:1px solid #efefef;
          padding: 4px;
          border-radius: 2px;
          min-height: 270px;
          height: 300px;
          overflow-y: scroll;
      }
      .resoceDialog{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
      .resoceDialog>div>p{
        color: #464646;
        padding: 10px 0;
        font-weight: bold;
        // background: #f1f4f7;
        margin-left:26px;
        padding-left:0px;
        margin-bottom: 5px;
        text-align: right;
      }
        >>>.jsoneditor-poweredBy {
          display: none !important;
        }
  
        .addPs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
          >div{
            width:50%
          }
          span{
            display: inline-block;
            width: 10%;
          }
        }
        .autoClass{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
        .autoClass .el-form-item{
          width:50%;
        }
        .addcs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
        }
        .addcs2 .el-select {
          display: inline-block;
          width: 240px;
        }
        .autoInput{
          display: inline-block;
          width: 70%;
        }
        .infoTitle{
          border-bottom:1px solid #e5e5e5;
          margin-bottom: 30px;
          position: relative;
        }
        .infoTitle>span{
          position: absolute;
          left: 20px;
          background: #fff;
          width:80px;
          top:-15px;
          height:30px;
          text-align: center;
          line-height: 30px;
        }
          .el-select{
             width:100%;
          }
          .timing{
            background:#fff;
            padding:20px 10px;
          }
        </style>
  